<template>
	<view class="order-detail-page">
		<!-- 新做领取页面 other  -->
		<template v-if="orderData.list && orderData.list.length">
			<headerVue @refrash="getOrderList" v-if="productType == 'TCL'" :pageParams="orderData"></headerVue>
		</template>

		<template v-if="orderData.list && orderData.list.length != 0">
			<view class="equity-name" v-if="orderData.list && orderData.list.length > 0">
				<view class="" v-if="orderData.list[0].equityType == 1">
					<view class="lijianjin-vip">
						<view class="video-title">
							<image style="width: 32rpx" :src="`${constInfo.srcConst}/sxzz/qy_icon_coupon.png`" mode="widthFix"></image>
							<view class="video-name">立减金权益</view>
						</view>
					</view>
				</view>
				<view class="" v-if="orderData.list[0].equityType == 2">
					<view class="video-container">
						<view class="video-title">
							<image style="width: 32rpx" :src="`${constInfo.srcConst}/sxzz/iconPlay.png`" mode="widthFix"></image>
							<view class="video-name">视频权益</view>
						</view>
						<view class="video-vip">
							<view class="video-vip-icon">
								<image style="width: 92rpx" :src="`${constInfo.srcConst}/sxzz/youKu.png`" mode="widthFix"></image>
							</view>
							<view class="video-vip-title">优酷视频会员月卡</view>
							<view class="video-vip-line">
								<up-line length="120rpx" color="#BDD0E3"></up-line>
							</view>
							<view class="video-vip-btn">
								<image style="width: 106rpx" :src="`${constInfo.srcConst}/sxzz/icon_get.png`" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="b-left-money" v-for="item in orderData.list" :key="item">
				<!-- 图片如何判断  -->
				<template v-if="item.redeemStatus == 2">
					<image class="writeOff" :src="`${constInfo.srcConst}/lhhy/tcl/writeOff.png`" style="width: 80rpx" mode="widthFix"></image>
				</template>
				<template v-if="item.receiveStatus == 1">
					<image :src="`${constInfo.srcConst}/lhhy/tcl/good.png`" style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image>
					<!-- 	<template v-if="haveOperate(item) == '未领取'">
				</template>
				<template v-else>
					<image src="/static/lh/equity/bad.png" style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image>
				</template> -->
				</template>
				<template v-if="item.receiveStatus == 2">
					<image :src="`${constInfo.srcConst}/lhhy/tcl/bad.png`" style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image>
				</template>
				<template v-if="item.receiveStatus == 3">
					<image :src="`${constInfo.srcConst}/lhhy/tcl/bad.png`" style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image>
				</template>
				<template v-if="item.receiveStatus == 4">
					<image :src="`${constInfo.srcConst}/lhhy/tcl/good.png`" style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image>
				</template>

				<!-- <image src="/static/lh/equity/bad.png" style="width: 700rpx; margin-left: 25rpx" mode="widthFix"></image> -->
				<view class="money-content">
					<!-- 四种产品 需要判断 1 立减金 2 虚拟会员 3 停车券 4 加油卷 -->
					<view class="content-left">
						<template v-if="item.equityType == 1">
							<text class="icon">￥</text>
							<text class="num">5</text>
						</template>
						<template v-if="item.equityType == 2">
							<text class="video">视频会员</text>
						</template>
					</view>

					<view class="content-detail">
						<view class="detail-name">{{ item.equityName ? item.equityName : item.portfolioName }}</view>
						<view class="detail-time">有效期{{ item.effectiveTime }}-{{ item.expireTime }}</view>
					</view>
					<!-- receiveStatus 领取状态 1 && 当前时间在有效时间范围内 未领取 有操作  -->
					<!-- receiveStatus 领取状态 1 && 当前时间小于生效时间 未到时间  无操作-->
					<!-- receiveStatus 领取状态 1 && 当前时间大于过期时间   已过期 无操作-->

					<!-- receiveStatus 领取状态 2 &&   领取中 无操作-->
					<!-- receiveStatus 领取状态 3 &&   领取成功 无操作-->
					<!-- receiveStatus 领取状态 4 &&   领取失败 -->
					<view class="right-btn">
						<view class="number">{{ parseInt(item.annualPayNum) }} 期</view>
						<view class="content-btn" v-if="item.receiveStatus == 1">
							<template v-if="haveOperate(item) == '未领取'">
								<button class="get-ticket" @click="getTiket(item)">{{ haveOperate(item) }}</button>
							</template>
							<template v-else>
								{{ haveOperate(item) }}
							</template>
						</view>
						<view v-else-if="item.receiveStatus == 2" class="content-load">{{ statusEnum[item.receiveStatus] }}</view>
						<view v-else-if="item.receiveStatus == 3" class="content-success">{{ statusEnum[item.receiveStatus] }}</view>
						<view v-else-if="item.receiveStatus == 4" class="content-error">
							<button @click="getTiket(item)" class="get-ticket">
								{{ statusEnum[item.receiveStatus] }}
							</button>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="orderData.loadStatus"></uni-load-more>
		</template>
		<template v-else>
			<up-empty mode="coupon" icon="/static/tabs/coupon.png" text="没有权益"></up-empty>
		</template>
		<up-picker
			:show="orderData.showPicker"
			@cancel="handleClose"
			:title="orderData.pickerTitle"
			:columns="orderData.columns"
			keyName="equityName"
			@confirm="confirm"
			@change="changeHandler"
		></up-picker>
	</view>
</template>

<script setup>
import { onMounted, defineAsyncComponent, ref } from 'vue';
import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import useEquityList from './equityList';
import { constStore } from '@/store/const.js';
const headerVue = defineAsyncComponent(() => import('./other-equity-header.vue'));
const { constInfo } = constStore();
const { handleLoadMore, refresh, getOrderList, orderData, handleClose, confirm, changeHandler, getTiket, haveOperate } = useEquityList();
const equityTypeEnum = ref(['', '立减金', '虚拟会员', '停车券', '加油券']);
const statusEnum = ['', '未领取', '领取中', '领取成功', '领取失败'];
const productType = ref();
onLoad((query) => {
	// 接受外部参数 参数来源于 login传递 或者其他什么地方
	console.log(query, 'orderDetail===>');
	if (query && query.orderNo) {
		orderData.params.condition.orderNo = query.orderNo;
	}
	// orderData.params.condition.orderNo ='LXN202411131344112367340'
	if (query && query.productType) {
		// 展示可以领取的东西
		productType.value = query.productType;
	}
});

onMounted(() => {
	var a = document.getElementsByClassName('uni-page-head-hd')[0];
	a.style.display = 'none';
	getOrderList();
});
/* 触底加载 */
onReachBottom(() => {
	console.log('触底加载');
	// handleLoadMore();
});
/* 下拉刷新 */
onPullDownRefresh(() => {
	console.log('下拉刷新');
	// refresh();
});
</script>

<style lang="scss" scoped>
@import url('equityList.scss');
</style>
